<template>
  <div>
    <div style="width:100%;height:50px;text-align:center;line-height:50px;font-size: 18px;border-bottom:1px solid black"
    @click="onClickSeleCn">精选专题--></div>
    <van-swipe :loop="false" :width="400" class="project"
    :show-indicators="false">
        <div v-for="(item,index) in data" :key="index" class="project_container"
        @click="onClickProject(item)">
            <van-swipe-item>
              <img :src="item.pic" alt="" class="project_img">
              <div style="font-size:16px" v-html="item.title"></div>
              <div class="project_wrapper_descript" v-html="item.descript"></div>
            </van-swipe-item>
        </div>
    </van-swipe>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            data:[]
        }
    },
    mounted(){
        axios.get("https://api.it120.cc/small4/cms/news/list").then(res=>{
      
            this.data = res.data.data
            // console.log(this.data);
            // console.log(res);
        })
    },
    methods:{
        onClickProject(item){
            console.log(item.id);
            this.$router.push({
                path:this.$myRouter.PathConfig.ARTICLE,
                query:{
                    id:item.id
                }
            })
        },
        onClickSeleCn(){
            localStorage.setItem("list1",JSON.stringify(this.data))
            this.$router.push({
                path:this.$myRouter.PathConfig.SELECOLUMN,
                query:{
                    list:this.data,
                }
            })
        }
    }
}
</script>

<style>
.project
{
    width: 100%;
    height: 300px;
}
.project_container
{
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.project_img
{
    width: 80%;
    height: 200px;
}
.project_wrapper_descript
{
    width: 80%;
    height: 34px;
    overflow: hidden;
    font-size: 12px;
}
.van-swipe-item
{
    width: 100%;
}
</style>